<template>
    <div class="box-fan">
        <div class="box-son">各区会员级别人数</div>
        <div :id="chartName" class="box"></div>
    </div>
</template>
<script setup lang="ts">
import { onMounted, reactive } from 'vue'
import * as echarts from 'echarts'

const props = defineProps<{
    chartName: string
}>()
const demo = () => {
    let myChart = echarts.init(document.getElementById(props.chartName))

    var placeHolderStyle = {
        normal: {
            color: 'rgba(0,0,0,0)',
            label: { show: false },
            labelLine: { show: false },
        },
        emphasis: {
            color: 'rgba(0,0,0,0)',
        },
    }
    var dataStyle = {
        normal: {
            label: { show: false },
            labelLine: { show: false },
            shadowBlur: 40,
            shadowColor: 'rgba(40, 40, 40, 0.5)',
        },
    };




    let option = {

        visualMap: [

        ],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                // Use axis to trigger tooltip
                type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
            }
        },
        legend: {
            right: "3%",
            top: "30%",
            orient: 'vertical',
            itemWidth: 13,
            itemHeight: 13,
            textStyle: {
                fontSize: 13,
                lineHeight: 15,
                color: '#fff'
            }
        },
        grid: {
            left: '3%',
            right: '27%',
            bottom: '5%',
            top: '15%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: ['1', '2', '3', '4', '5', '6', '7'],
            axisTick: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            axisLine: {
                show: true
            },
            splitLine: {
                show: false
            }
        },
        series: [

            {
                name: '中国区',
                type: 'bar',
                stack: 'total',
                barWidth: "10",
                emphasis: {
                    focus: 'series'
                },
                data: [320, 302, 301, 334, 390, 330, 320],

            },
            {
                name: '亚太区',
                type: 'bar',
                stack: 'total',
                emphasis: {
                    focus: 'series'
                },
                data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
                name: '美洲区',
                type: 'bar',

                stack: 'total',
                emphasis: {
                    focus: 'series'
                },
                data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
                name: '欧美区',
                type: 'bar',
                stack: 'total',
                emphasis: {
                    focus: 'series'
                },
                data: [150, 212, 201, 154, 190, 330, 410]
            },
            {
                name: '非洲区',
                type: 'bar',
                stack: 'total',
                emphasis: {
                    focus: 'series'
                },
                data: [820, 832, 901, 934, 1290, 1330, 1320]
            }
        ]

    };
    myChart.setOption(option)
    window.addEventListener("resize", function () {
        // 让我们的图表调用 resize这个方法
        myChart.resize();
    });
};


onMounted(() => {
    demo()
})
</script>
<style lang='scss' scoped>
.box {
    width: 100%;

    height: 200px;
    background: #fff;

    height: 210px;
    background: #09194b90;
}

.box-fan {
    position: relative;
    overflow: hidden
}

.box-son {
    width: 100%;
    height: 1.42rem;
    line-height: 1.42rem;
    padding-left: .9rem;
    overflow: hidden;
    z-index: 999;
    position: absolute;
    color: #ffffff !important;
    top: 0;
    left: 0;
    background: linear-gradient(to right, #5eddf0, #091a4b);
}
</style>